class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            cate: [],
            name: '',
            pwd: '',
            confirmpwd: '',
            cid: 0,
            id: 0,
            start: 0,
            pagesize: 15,
            counts: [],
            phone: '',
            agentid: '',
            phone: '',
            applet_name:'',
        };
    }

    formatlist(list) {
        var listitem = [], { cate } = this.state, rolename = '';
        list.forEach((x, i) => {
            listitem.push(
                <tr key={i}>
                    <td>{x.apply.agentid}</td>
                    <td>{x.apply.phone == '' || x.apply.phone == 'null' ? '无' : x.apply.phone}</td>
                    <td>{x.apply.username}</td>
                    <td>{x.apply.password}</td>
                    <td>{x.nickName}</td>
                    <td>{x.apply.applet_name== '' || x.apply.applet_name == 'null' ? '无' : x.apply.applet_name}</td>
                    <td className="operatebox">
                        <div className='operate' id={"ope" + x.apply.id}>
                            <div data-toggle="modal" data-target="#modalTwo">
                                <img src="./src/edit.png" />
                                <p className='edit' onClick={this.modify.bind(this, x.apply.id)}>修改</p>
                            </div>
                            <div data-toggle="modal" data-target="#modalThird">
                                <img src="./src/edit.png" />
                                <p className='edit' onClick={this.todetail.bind(this, x.apply.id)}>修改密码</p>
                            </div>
                            <div>
                                <img src="./src/del.png" />
                                <p className='edit colred' onClick={this.del.bind(this, x.apply.id)}>删除</p>
                            </div>


                        </div>
                    </td>
                </tr>
            )
        });
        this.setState({ listitem, list, originallist: list })
    }

    // 修改电话
    modify(e) {
        let { list } = this.state
        list.forEach(x => {
            if (x.apply.id == e) {
                this.setState({ id: e, phone: x.apply.phone,applet_name:x.apply.applet_name })
            }
        })
    }

    // 修改密码昵称
    todetail(e) {
        this.setState({ id: e })
    }
    // 删除
    del(e) {
        console.log(e, 'eeeeee');

        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        BackUserdeluser(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }

    submit() {

        let { name, pwd, confirmpwd, agentid, start, phone,applet_name,cid  } = this.state, that = this, err = '';

        if (applet_name.trim() == "") err = "请输入小程序分享副名称"
        if (agentid.trim() == "") err = "请输入合伙人ID"
        if (pwd != confirmpwd) err = "密码错误，请重新输入"
        if (confirmpwd.trim() == "") err = "请再次输入密码"
        if (pwd.trim() == "") err = "请输入密码"
        if (name.trim() == "") err = "请输入账号昵称"
        if (err.length > 0) {
            alert(err);
            return
        }
        // pwd = md5(pwd + Constant.SALT);

        let data = { username: name, password: pwd, agentid, phone,applet_name,copyuserid:cid }
        BackUseradduser(data, res => {
            if (res.issuccess == 1) {
                that.setState({ id: 0, name: '', pwd: '', confirmpwd: '', agentid: '', phone: '',applet_name:'',cid:0 })
                alert('保存成功');
                that.freshlist(start)
            } else {
                alert(res.msg)
            }
        })

    }

    submittwo() {

        let {  start, phone,applet_name, id } = this.state, that = this, err = '';

        // if (!Number(agentid)) err = "请输入合伙人ID"
        // if (err.length > 0) {
        //     alert(err);
        //     return
        // }

        let data = {  applet_name,phone, id }
        BackUsersetidphone(data, res => {
            if (res.issuccess == 1) {
                that.setState({ id: 0,  phone: '',applet_name:'' })
                alert('保存成功');
                that.freshlist(start)
            } else {
                alert(res.msg)
            }
        })

    }


    submitthird() {
        let { pwd, confirmpwd, start, id } = this.state, that = this, err = '';
        if (pwd != confirmpwd) err = "密码错误，请重新输入"
        if (confirmpwd.trim() == "") err = "请再次输入密码"
        if (pwd.trim() == "") err = "请输入密码"
        if (err.length > 0) {
            alert(err);
            return
        }
        // pwd = md5(pwd + Constant.SALT);
        let data = { password: pwd, id }
        BackUsersetpassword(data, res => {
            if (res.issuccess == 1) {
                that.setState({ id: 0, pwd: '', confirmpwd: '' })
                alert('修改成功');
                that.freshlist(start)
            }
        })
    }

    componentDidMount() {
        // let a="oSlgu5Zma-ZXuyXKweElmZNGmn1k"
        // console.log(a.length);
        getagentlist(res => {
            let agenthtml = []
            if (res.issuccess == 1) {
                agenthtml.push(
                    <option value="0">请选择</option>
                )
                res.list.forEach((x, i) => {
                    agenthtml.push(
                    <option key={i} value={x.id}>ID：{x.id}，昵称：{x.nickName} </option>
                    )

                })
                this.setState({ agenthtml, originallist: res.list },()=>{
                    this.freshlist(0)
                })
            }
        })
        // this.freshlist(0)
    }
    // getagent(){
    //     let {start}=this.state
    //     getagentlist(res => {
    //         let agenthtml = []
    //         if (res.issuccess == 1) {
    //             agenthtml.push(
    //                 <option value="0">请选择</option>
    //             )
    //             res.list.forEach((x, i) => {
    //                 agenthtml.push(
    //                 <option key={i} value={x.id}>ID：{x.id}，昵称：{x.nickName} </option>
    //                 )

    //             })
    //             this.setState({ agenthtml, originallist: res.list }, () => {
    //                 this.freshlist(start)
    //             })
    //         }
    //     })
    // }
    freshlist(start) {
        let { pagesize } = this.state;
        BackUsergetlist({ pagesize, start }, res => {
            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }
        })

    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start)
        })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            this.freshlist(start)
        })
    }
    inputchange(prop, e) {
        // let { target } = this.state;
        // target[prop] = e.target.value
        // this.setState({ target })
        this.setState({ [prop]: e.target.value })
    }
    onstatechange(e) {

        let { cid } = this.state, estate = e.target.value;
        if (cid == estate) return;
        this.setState({ cid: estate })
    }
    add() {
        this.setState({ id: 0, name: '', pwd: '', confirmpwd: '', agentid: '', phone: '',applet_name:'',cid:0 }, () => {
            $('#modalOne').modal('toggle');
        })
    }
    render() {
        let { listitem, name, pwd, confirmpwd, counts, pagestart, agenthtml, phone, agentid,applet_name } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className="modal fade" id="modalTwo" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">修改</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                {/* <div className="input-group">
                                    <span className="input-group-addon">合伙人ID</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'agentid')} value={agentid} type="text" placeholder='请输入合伙人ID' className="input" />
                                </div> */}
                                <div className="input-group">
                                    <span className="input-group-addon">标识电话</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'phone')} value={phone} type="text" maxLength="11" placeholder='请输入标识电话' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">小程序副名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'applet_name')} value={applet_name} type="text" maxLength="11" placeholder='请输入小程序分享副名称' className="input" />
                                </div>
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submittwo.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>

                <div className="modal fade" id="modalThird" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">修改</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="input-group-addon">账号密码</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'pwd')} value={pwd} type="password" placeholder='请输入账号密码' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">确认密码</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'confirmpwd')} value={confirmpwd} type="password" placeholder='请再次确认密码' className="input" />
                                </div>
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submitthird.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div className="modal fade" id="modalOne" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">新建账号</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="input-group-addon">合伙人ID</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'agentid')} value={agentid} type="text" placeholder='请输入合伙人ID' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">标识电话</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'phone')} value={phone} type="text" maxLength="11" placeholder='请输入标识电话' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">账号昵称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'name')} value={name} type="text" placeholder='请输入账号昵称' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">账号密码</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'pwd')} value={pwd} type="password" placeholder='请输入账号密码' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">确认密码</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'confirmpwd')} value={confirmpwd} type="password" placeholder='请再次确认密码' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">小程序副名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'applet_name')} value={applet_name} type="text" placeholder='请输入小程序分享副名称' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">复制id</span>
                                    <div className="tabletit">
                                    <select value={this.state.cid} onChange={this.onstatechange.bind(this)} className="form-control select">
                                        {agenthtml}
                                    </select>
                                    </div>
                                </div>

                                {/* <div className="input-group">
                                    <span className="input-group-addon">绑定合伙人</span>
                                    <div className="tabletit">
                                    <select value={this.state.cid} onChange={this.onstatechange.bind(this)} className="form-control select">
                                        {agenthtml}
                                    </select>
                                    </div>
                                </div> */}
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submit.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            当前位置 > 账号管理
                        </div>
                    </div>
                    <div className="content">
                        <div className="tabletit">
                            <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>
                        </div>
                        <table className="tab">
                            <thead>
                                <tr>
                                    <th>合伙人ID</th>
                                    <th>标识电话</th>
                                    <th>账号昵称</th>
                                    <th>账号密码</th>
                                    <th>绑定人昵称</th>
                                    <th>小程序副名称</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                        </div>
                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='member' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)